<template>
    <div class="Personaltrainingtocreate">
        <div class="Personaltrainingtocreate-title">
            <span @click="Goback()">创建课程</span>
        </div>
        <div class="Personaltrainingtocreate-content">
            <span>默认选择本地时区，点击可更改</span>
            <label class="Createcourse-data">
                <span><i>*</i> 日期</span>
                <el-date-picker v-model="dateof" type="date" placeholder="选择日期"></el-date-picker>
            </label>
            <label class="Createcourse-Periodtime">
                <span><i>*</i> 时间段</span>
                <ul v-for="(item,index) in Periodtime" :key="index" class="Periodtime-List">
                    <span>{{item.Periodtimes}}</span>
                    <li v-for="(items,e) in item.tiemrs" :key="e" @click="chosePeriodtime(index,e)" :class="chosePeriodtimeindex == index+'.'+e?'seled':''">{{items}}</li>
                </ul>
            </label>
            <label class="Createcourse-button">
                <span>取消</span>
                <span @click="Confirmthechange()">确认修改</span>
            </label>
        </div>
    </div>
</template>
<script>
export default {
    name:'Personaltrainingtocreate',
    data(){
        return{
            Periodtime:[
                {
                    Periodtimes:'凌晨',
                    tiemrs:['00:00-00:30','00:30-01:00','01:00-01:30','01:30-02:00','02:00-02:30','02:30-03:00','03:00-03:30','03:30-04:00','04:00-04:30','04:30-05:00','05:00-05:30','05:30-06:00']
                    
                },
                {
                    Periodtimes:'早上',
                    tiemrs:['06:00-06:30','06:30-07:00','07:00-07:30','07:30-08:00']
                    
                },
                {
                    Periodtimes:'上午',
                    tiemrs:['08:00-08:30','08:30-09:00','09:00-09:30','09:30-10:00','10:00-10:30','10:30-11:00','11:00-11:30','11:30-12:00']
                    
                },
                {
                    Periodtimes:'中午',
                    tiemrs:['12:00-12:30','12:30-13:00','13:00-13:30','13:30-14:00']
                    
                },
                {
                    Periodtimes:'下午',
                    tiemrs:['14:00-14:30','14:30-15:00','15:00-15:30','15:30-16:00','16:00-16:30','16:30-17:00','17:00-17:30','17:30-18:00']
                    
                },
                {
                    Periodtimes:'晚上',
                    tiemrs:['18:00-18:30','18:30-19:00','19:00-19:30','19:30-20:00','20:00-20:30','20:30-21:00','21:00-21:30','21:30-22:00','22:00-22:30','22:30-23:00','23:00-23:30','23:30-00:00']
                    
                }
            ],
            chosePeriodtimeindex:'',
            dateof:new Date,
            id:this.$route.query.id,
        }
    },
    methods:{
        Goback(){//返回上一页
            this.$router.go(-1);
        },
        chosePeriodtime(e,echild){//选择时间段
            this.chosePeriodtimeindex =e+'.'+echild
        },
        Confirmthechange(){//确认修改
            var data ={
                id :id,
                offset:'+8',
                status:4,

            }
        }
    }
}
</script>
<style lang="less" scoped>
    .Personaltrainingtocreate{
        position: relative;
        width: 100%;
        background: #ffffff;
        border-radius: 20px;
    }
    .Personaltrainingtocreate-title{
        position: relative;
        width: 90%;
        height: 80px;
        border-bottom: 1px solid #47CECF;
        margin: 0 auto;
        padding-top: 100px;
        display: flex;
        align-items: center;
        background-image: url('/images/形状 3png.png');
        background-repeat: no-repeat;
        background-position-y: 120px;
        span{
            padding-left: 4%;
            height: 100%;
            width: 20%;
            line-height: 80px;
            font-size: 20.01px;
            font-weight: bold;
            color: #2DC7C8;
            cursor: pointer;
        }
    }
    .Personaltrainingtocreate-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    .Personaltrainingtocreate-content>span{
        display: inline-block;
        width: 100%;
        height:40px;
        background:rgba(243,243,243,1);
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        color: #D9D8D8;
        margin-top: 10px;
        cursor: pointer;
    }
    .Personaltrainingtocreate-content>label{
        display: flex;
        width: 100%;
        margin-top: 30px;
        span{
            width: 10%;
            i{
                color: #FF7336;
            }
        }
    }
    .Createcourse-data{
        height: 60px;
        align-items: center;
        /deep/.el-date-editor{
            width: 50%;
            border: #CECECE;
        }
    }
    .Createcourse-Periodtime{
        align-items: center;
        flex-wrap: wrap;
        ul{
            display: flex;
            width: 90%;
            padding: 0;
            flex-wrap: wrap;
            list-style: none;
            margin-left: auto;
            li{
                width: 16%;
                font-size: 12px;
                height: 31px;
                background:rgba(221,221,221,1);
                border-radius:16px;
                margin-top: 10px;
                text-align: center;
                line-height: 31px;
                margin-left: 1%;
                cursor: pointer;
                &:first-child{
                    width: 10%;
                    background: none;
                }
            }
        }
    }
    .Createcourse-Periodtime>span{
        margin-top: -8.5%;
    }
    .Periodtime-List>span{
        width: 6%!important;
        height: 31px!important;
        margin-top: 10px;
        line-height: 31px!important;
    }
    .Periodtime-List>li{
        &:nth-child(7){
            margin-left: 7%;
        }
        &:nth-child(12){
            margin-left: 7%;
        }
    }
    .seled{
        background: #3ACBCC!important;
    }
    .Createcourse-button{
        height: 100px;
        align-items: center;
        padding-bottom: 100px;
        span{
            width: 20%!important;
            height: 41px;
            line-height: 41px;
            text-align: center;
            cursor: pointer;
            &:first-child{
                background:rgba(222,222,222,1);
                border-radius:21px;
                margin-left: 14%;
            }
            &:last-child{
                background:rgba(58,203,204,1);
                border-radius:21px;
                color: #ffffff;
                margin-left: 4%;
            }
        }
    }
</style>